<!DOCTYPE html>
<html>
<head>
    <title>添加模板</title>
    <include file='public/head'>
	<style>
		.layui-legend-size{font-size:14px !important;}
		.layui-field-padding{border-width: 1px;padding:0 0 5px 10px;}
	</style>
</head>
<body>
	<!-- layui-tab开始 -->
	<div class="layui-tab " lay-filter="demo-tab" >

        <div class="layui-col-md12">
            
            <div class="layui-col-md8 layui-col-md-offset2" >
                <!-- 开始 -->
        		<fieldset class="layui-elem-field layui-field-title layui-field-padding" style="padding:20px;margin:20px auto;" >

                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">模板名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入模板名称" autocomplete="off" class="layui-input" value="{$mb.name|default=''}" >
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">模板分类</label>
                                <div class="layui-input-block">
                                    <select name="type" lay-filter="">
                                        <volist name="mb" id="vo">
                                            <option value="{$key}" <?php if( $key == $type )echo 'selected'; ?> >{$vo}</option>
                                        </volist>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">关联表名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="table_name" required  lay-verify="" placeholder="请输入关联表名" autocomplete="off" class="layui-input" value="" >
                                </div>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal getfield-btn">获取表字段</button>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">字段映射</label>
                                <div class="layui-input-block">
                                    <table  class="layui-table">
                                        <thead>
                                            <tr>
                                                <th>原始字段</th>
                                                <th>映射字段</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>店铺id</td>
                                                <td class="select-box select-map" data-tag="store_id">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>关联id</td>
                                                <td class="select-box select-map" data-tag="relevance_id">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>标题</td>
                                                <td class="select-box select-map" data-tag="title">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>简介</td>
                                                <td class="select-box select-map" data-tag="introductory">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>图片</td>
                                                <td class="select-box select-map" data-tag="img">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>类型</td>
                                                <td class="select-map" data-tag="addr_type">
                                                    <select name="addr_type" lay-filter="aihao">
                                                        <option value="0">超链接</option>
                                                        <option value="1">路由地址</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>超链接|路由地址</td>
                                                <td class="field-map" data-tag="addr">
                                                    <input type="text" name="addr" required  lay-verify="" placeholder="请输入超链接或路由地址" autocomplete="off" class="layui-input" value="" >
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>时间(s)</td>
                                                <td class="field-map" data-tag="delay">
                                                    <input type="number" name="delay" required  lay-verify="" placeholder="请输入时间" autocomplete="off" class="layui-input" value="" >
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>状态</td>
                                                <td class="select-map" data-tag="status"> 
                                                    <select name="status" lay-filter="aihao">
                                                        <option value="1">显示</option>
                                                        <option value="0">隐藏</option>
                                                    </select>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            
                            <div class="layui-form-item" style="display:none;">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit id="tj_btn" lay-filter="sitesave">保存设置</button>
                                </div>
                            </div>
                        </form>
        		</fieldset>
                
            </div>
        </div>
		
		
		
	</div>
	<!-- layui-tab结束-->
	<include file='public/scripts'>
    
	<script>
	    ;(function(){
	        var form = layui.form;
	        var upload = layui.upload; 
        
            //执行实例
            var uploadInst = upload.render({
                elem: '#img_logo' //绑定元素
                ,url: '{:cmf_plugin_url("SiteConfig://admin_index/logoIcon")}' //上传接口
                ,done: function(res){
                //上传完毕回调
                    layer.msg( res.message , { time:1000 , icon:(res.code ==200 )?1:5 } , function(){
                        if ( res.code == 200 ){
                            $( '#img_logo' ).attr( 'src' , res.data );
                            $( '#logo_icon' ).val( res.data );
                        }
                    } );
                }
                ,error: function(){
                //请求异常回调
                }
            });
            
            //获取映射信息
            
            var getMapInfo = function(){
                var obj = {};
                $('.select-map').each( function(){
                    
                    var name = $( this ).data( 'tag' );
                    
                    var value = $(this).find('dd.layui-this').attr( 'lay-value' );
                    
                    obj [ name ] = value == undefined ? '' : value;
                });
                return obj;
            };
            
	        //监听提交
            form.on('submit(sitesave)', function( data ){
                //询问框
                
                var fieldMap = getMapInfo();
                fieldMap['addr'] = $( 'input[name=addr]' ).val();
                fieldMap['delay'] = $( 'input[name=delay]' ).val();
                var obj = { field_map : fieldMap };
                data = $.extend( data.field , obj );
                
                $.post( '{:cmf_plugin_url("SiteConfig://home_page_config/savemb")}' , {data : data } , function( res ){
                    layer.msg( res.message , { time: 800 } , function(){
                        parent.location.reload();
                    } );
                } );
                
                return false;
            });
            

            
            $(document).on('click' , '.getfield-btn' , function(){
                let tb = $( 'input[name=table_name]' ).val();
                if( $.trim( tb ).length==0 ){
                    layer.msg( '请输入表名' );
                    return false;
                }
                
                $.post( "{:cmf_plugin_url('SiteConfig://home_page_config/gettbinfo')}" , { tableName : tb } , function( res ){
                    layer.msg( res.message  , { time: 800 , icon : res.code == 200 ? 1:5 } , function(){
                        if( res.code == 200 ){
                            $( '.select-box' ).html( res.data );
                            form.render();
                        }
                    });
                });
            } );
            
	    })();
	    
	    function callbackdata( index )
	    {
	        $( '#tj_btn' ).click();
	    }
	    
	</script>
	



</body>
</html>